<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="left">
				<u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
			</view>
			<view class="title">健康评估</view>
			<view class="right"></view>
		</view>
		
		<!-- 评估类型选择 -->
		<view class="type-select">
			<scroll-view scroll-x class="type-scroll">
				<view class="type-scroll-content">
					<view class="type-item" 
						v-for="(item, index) in types" 
						:key="index"
						:class="{'active': currentType === item.id}"
						@click="selectType(item)">
						<view class="icon-box" :style="{backgroundColor: item.color}">
							<u-icon :name="item.icon" size="48" color="#fff"></u-icon>
						</view>
						<text class="name">{{item.name}}</text>
						<text class="desc">{{item.desc}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 评估表单 -->
		<scroll-view class="form-scroll" scroll-y>
			<view class="form-container">
				<view class="form-card" v-for="(item, index) in currentQuestions" :key="index">
					<view class="question">
						<text class="number">{{index + 1}}.</text>
						<text class="text">{{item.question}}</text>
					</view>
					
					<view class="options">
						<view class="option-card" 
							v-for="(option, optionIndex) in item.options" 
							:key="optionIndex"
							:class="{'selected': item.selected === optionIndex}"
							@click="selectOption(index, optionIndex)">
							<view class="option-content">
								<text class="option-text">{{option.text}}</text>
								<text class="score" v-if="option.score">({{option.score}}分)</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="submit-btn" :class="{'disabled': !canSubmit}" @click="submit">
					<text>提交评估</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentType: 'stroke',
				types: [
					{
						id: 'stroke',
						name: '脑卒中风险评估',
						icon: 'heart',
						color: '#FF6B6B',
						desc: '评估脑卒中风险指数'
					},
					{
						id: 'behavior',
						name: '健康行为评估',
						icon: 'star',
						color: '#50C1E9',
						desc: '评估健康行为习惯'
					},
					{
						id: 'recurrence',
						name: '复发风险感知',
						icon: 'warning',
						color: '#F5A623',
						desc: '评估复发风险指数'
					},
					{
						id: 'impulse',
						name: '爱冲动检测',
						icon: 'arrow-upward',
						color: '#AC92EB',
						desc: '检测冲动行为倾向'
					}
				],
				questions: {
					stroke: [
						{
							question: '您的年龄是？',
							options: [
								{ text: '40岁以下', score: 0 },
								{ text: '40-49岁', score: 1 },
								{ text: '50-59岁', score: 2 },
								{ text: '60-69岁', score: 3 },
								{ text: '70岁以上', score: 4 }
							],
							selected: -1
						},
						{
							question: '您的血压情况是？',
							options: [
								{ text: '正常', score: 0 },
								{ text: '偏高', score: 1 },
								{ text: '高血压', score: 2 }
							],
							selected: -1
						},
						{
							question: '您是否吸烟？',
							options: [
								{ text: '从不吸烟', score: 0 },
								{ text: '已戒烟', score: 1 },
								{ text: '偶尔吸烟', score: 2 },
								{ text: '经常吸烟', score: 3 }
							],
							selected: -1
						}
					],
					behavior: [
						{
							question: '您每周运动几次？',
							options: [
								{ text: '从不运动', score: 0 },
								{ text: '1-2次', score: 1 },
								{ text: '3-4次', score: 2 },
								{ text: '5次以上', score: 3 }
							],
							selected: -1
						},
						{
							question: '您的饮食习惯如何？',
							options: [
								{ text: '不规律', score: 0 },
								{ text: '一般', score: 1 },
								{ text: '良好', score: 2 }
							],
							selected: -1
						}
					],
					recurrence: [
						{
							question: '您是否了解脑卒中的复发风险？',
							options: [
								{ text: '完全不了解', score: 0 },
								{ text: '了解一些', score: 1 },
								{ text: '非常了解', score: 2 }
							],
							selected: -1
						},
						{
							question: '您是否定期进行健康检查？',
							options: [
								{ text: '从不检查', score: 0 },
								{ text: '偶尔检查', score: 1 },
								{ text: '定期检查', score: 2 }
							],
							selected: -1
						}
					],
					impulse: [
						{
							question: '您在做决定前是否经常冲动行事而不考虑后果？',
							options: [
								{ text: '从不', score: 0 },
								{ text: '偶尔', score: 1 },
								{ text: '经常', score: 2 },
								{ text: '总是', score: 3 }
							],
							selected: -1
						},
						{
							question: '当您感到沮丧或焦虑时，是否会采取可能有害的行为来应对？',
							options: [
								{ text: '从不', score: 0 },
								{ text: '偶尔', score: 1 },
								{ text: '经常', score: 2 },
								{ text: '总是', score: 3 }
							],
							selected: -1
						},
						{
							question: '您是否经常在没有计划的情况下做事？',
							options: [
								{ text: '从不', score: 0 },
								{ text: '偶尔', score: 1 },
								{ text: '经常', score: 2 },
								{ text: '总是', score: 3 }
							],
							selected: -1
						},
						{
							question: '您是否容易对人发脾气或情绪波动较大？',
							options: [
								{ text: '从不', score: 0 },
								{ text: '偶尔', score: 1 },
								{ text: '经常', score: 2 },
								{ text: '总是', score: 3 }
							],
							selected: -1
						},
						{
							question: '您是否喜欢寻求刺激和冒险活动？',
							options: [
								{ text: '从不', score: 0 },
								{ text: '偶尔', score: 1 },
								{ text: '经常', score: 2 },
								{ text: '总是', score: 3 }
							],
							selected: -1
						}
					]
				}
			}
		},
		computed: {
			currentQuestions() {
				return this.questions[this.currentType]
			},
			canSubmit() {
				return this.currentQuestions.every(item => item.selected !== -1)
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			selectType(type) {
				// 如果是脑卒中风险评估，则跳转到独立页面
				if (type.id === 'stroke-risk') {
					uni.navigateTo({
						url: '/pages/assessment/stroke-risk'
					})
					return
				}
				
				this.currentType = type.id
				this.$nextTick(() => {
					this.scrollToTop()
				})
			},
			selectOption(questionIndex, optionIndex) {
				this.currentQuestions[questionIndex].selected = optionIndex
			},
			submit() {
				if (!this.canSubmit) {
					uni.showToast({
						title: '请回答所有问题',
						icon: 'none'
					})
					return
				}
				
				// 计算总分
				const totalScore = this.currentQuestions.reduce((sum, item) => {
					const optionIndex = item.selected
					return sum + item.options[optionIndex].score
				}, 0)
				
				uni.showLoading({
					title: '提交中...'
				})
				
				// 模拟提交过程
				setTimeout(() => {
					uni.hideLoading()
					
					// 根据评估类型和分数显示不同结果
					let result = ''
					if (this.currentType === 'stroke') {
						if (totalScore < 3) {
							result = '低风险'
						} else if (totalScore < 6) {
							result = '中风险'
						} else {
							result = '高风险'
						}
					} else if (this.currentType === 'behavior') {
						if (totalScore < 2) {
							result = '需要改善'
						} else if (totalScore < 4) {
							result = '一般'
						} else {
							result = '良好'
						}
					} else if (this.currentType === 'recurrence') {
						if (totalScore < 2) {
							result = '认知不足'
						} else if (totalScore < 4) {
							result = '认知一般'
						} else {
							result = '认知良好'
						}
					} else {
						// 爱冲动检测
						if (totalScore < 3) {
							result = '冲动行为倾向较低'
						} else if (totalScore < 5) {
							result = '冲动行为倾向一般'
						} else {
							result = '冲动行为倾向较高'
						}
					}
					
					uni.showModal({
						title: '评估结果',
						content: `您的评估结果为: ${result}`,
						confirmText: '查看报告',
						success: (res) => {
							if (res.confirm) {
								// 跳转到报告页面
								uni.navigateTo({
									url: `/pages/assessment/result?score=${totalScore}&type=${this.currentType}`
								})
							}
						}
					})
				}, 1000)
			}
		},
		onLoad(options) {
			// 如果有type参数，切换到对应的评估类型
			if (options.type && this.types.some(t => t.id === options.type)) {
				this.currentType = options.type
			}
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #F7F7FA;
		
		.nav-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx;
			background-color: #fff;
			
			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}
		
		.type-select {
			background-color: #fff;
			margin-bottom: 20rpx;
			
			.type-scroll {
				width: 100%;
				white-space: nowrap;
				
				.type-scroll-content {
					display: inline-flex;
					padding: 30rpx;
				}
				
				.type-item {
					flex: 0 0 auto;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 20rpx;
					border-radius: 20rpx;
					margin: 0 10rpx;
					background-color: #F7F7FA;
					width: 200rpx;
					
					&.active {
						background-color: #e6f7ff;
						
						.name {
							color: #1890FF;
						}
					}
					
					.icon-box {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 20rpx;
					}
					
					.name {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 10rpx;
					}
					
					.desc {
						font-size: 24rpx;
						color: #999;
						white-space: normal;
						text-align: center;
					}
				}
			}
		}
		
		.form-scroll {
			height: calc(100vh - 300rpx);
			
			.form-container {
				padding: 30rpx;
				
				.form-card {
					background-color: #fff;
					border-radius: 20rpx;
					padding: 30rpx;
					margin-bottom: 30rpx;
					box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
					
					.question {
						display: flex;
						margin-bottom: 30rpx;
						
						.number {
							font-size: 32rpx;
							font-weight: bold;
							color: #1890FF;
							margin-right: 10rpx;
						}
						
						.text {
							font-size: 32rpx;
							color: #333;
							line-height: 1.4;
						}
					}
					
					.options {
						display: flex;
						flex-wrap: wrap;
						margin: 0 -10rpx;
						
						.option-card {
							width: calc(50% - 20rpx);
							margin: 10rpx;
							background-color: #F7F7FA;
							border-radius: 16rpx;
							overflow: hidden;
							transition: all 0.3s;
							
							&.selected {
								background-color: #e6f7ff;
								border: 2rpx solid #1890FF;
								
								.option-text {
									color: #1890FF;
								}
							}
							
							.option-content {
								padding: 20rpx;
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;
								min-height: 100rpx;
								
								.option-text {
									font-size: 28rpx;
									color: #333;
									text-align: center;
								}
								
								.score {
									font-size: 24rpx;
									color: #999;
									margin-top: 10rpx;
								}
							}
						}
					}
				}
				
				.submit-btn {
					height: 88rpx;
					background-color: #1890FF;
					border-radius: 44rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 40rpx;
					box-shadow: 0 2rpx 12rpx rgba(24, 144, 255, 0.3);
					
					text {
						font-size: 32rpx;
						color: #fff;
						font-weight: bold;
					}
					
					&.disabled {
						background-color: #ccc;
						opacity: 0.6;
						box-shadow: none;
					}
				}
			}
		}
	}
</style> 